import React, { useState, useEffect } from 'react';
import './index.less';
import moment from 'moment';
import { Divider, Image, Typography } from 'antd';
import genaratorType from '@/utils/genaratorType';
import IconFont from '@/components/IconFont';
import { DownloadOutlined, CopyOutlined } from '@ant-design/icons';
import Speak from '@/components/Speaking/speak';

// const typeconfig = {
//   text: "文字",
//   picture: "图片",
//   audio: "语音",
//   file:  "文件"
// }

const { Paragraph } = Typography;
const ChartItem = ({
  user_id,
  message_content,
  message_type,
  created_at,
  setModal,
  companies,
}) => {
  const filename = message_content?.split?.('.')?.pop?.()?.toLowerCase?.();
  const type = filename ? genaratorType(filename) : null;
  const name =
    message_content?.split('/')?.[message_content?.split('/')?.length - 1];

  const [speak, setSpeak] = useState(null);

  if (user_id) {
    return (
      <div
        className="hovers"
        style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'flex-start',
          alignItems: 'flex-start',
          borderRadius: 6,
          padding: 12,
          gap: 4,
          cursor: 'pointer',
        }}
        onClick={() => {
          if (message_type === 'file' && type !== 'img') {
            setModal((s) => ({
              ...s,
              title: name,
              type,
              url: message_content,
              open: true,
            }));
          }
        }}
      >
        <span style={{ color: '#666' }}>{companies?.area_name}小吾</span>
        <div
          style={{
            backgroundColor: '#f0f0f0',
            color: '#000',
            borderRadius: 6,
            padding: 12,
            whiteSpace: 'pre-wrap',
          }}
        >
          {message_type === 'picture' || type === 'img' ? (
            <Image
              src={message_content}
              style={{ width: 80, height: 80, objectFit: 'contain' }}
            />
          ) : message_type === 'file' ? (
            <div className="center">
              <IconFont type={`icon-${type}`} style={{ fontSize: 36 }} />
              {name}
            </div>
          ) : message_type === 'audio' ? (
            <Speak
              speak={speak}
              setSpeak={setSpeak}
              message_content={message_content}
              server={true}
            ></Speak>
          ) : (
            message_content
          )}
        </div>
        <span
          className="hovershow"
          style={{ color: '#aaa', display: 'flex', gap: 12 }}
        >
          {message_type === 'file' && (
            <Paragraph
              copyable={{
                text: 'http://wbnoa.wbnacc.com/' + message_content,
                icon: <CopyOutlined />,
              }}
            ></Paragraph>
          )}{' '}
          {moment(created_at).format('YYYY-MM-DD HH:mm:ss')}
        </span>
      </div>
    );
  } else {
    return (
      <div
        className="hovers"
        style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'flex-end',
          alignItems: 'flex-end',
          padding: 12,
          gap: 4,
          cursor: 'pointer',
        }}
        onClick={() => {
          if (message_type === 'file' && type !== 'img') {
            setModal((s) => ({
              ...s,
              title: name,
              type,
              url: message_content,
              open: true,
            }));
          }
        }}
      >
        <span style={{ color: '#666' }}>我</span>
        <div
          style={{
            backgroundColor: '#95EC69',
            color: '#000',
            borderRadius: 6,
            padding: 12,
            whiteSpace: 'pre-wrap',
          }}
        >
          {message_type === 'picture' || type === 'img' ? (
            <Image
              src={message_content}
              style={{ width: 80, height: 80, objectFit: 'contain' }}
            />
          ) : message_type === 'file' ? (
            <div className="center">
              <IconFont type={`icon-${type}`} style={{ fontSize: 36 }} />
              {name}
            </div>
          ) : message_type === 'audio' ? (
            <Speak
              speak={speak}
              setSpeak={setSpeak}
              message_content={message_content}
            ></Speak>
          ) : (
            message_content
          )}
        </div>
        <span
          className="hovershow"
          style={{ color: '#aaa', display: 'flex', gap: 12 }}
        >
          {message_type === 'file' && (
            <Paragraph
              copyable={{
                text: 'http://wbnoa.wbnacc.com/' + message_content,
                icon: <CopyOutlined />,
              }}
            ></Paragraph>
          )}{' '}
          {moment(created_at).format('YYYY-MM-DD HH:mm:ss')}
        </span>
      </div>
    );
  }
};

export default ChartItem;
